<div class="container filter">
  <form nz-form [formGroup]="searchForm" (ngSubmit)="onSubmit()">
    <div>
      <i nz-icon nzType="search" nzTheme="outline" class="card-title"></i>
      <span class="card-title">筛选搜索</span>
      <button type="submit" nz-button nzType="primary" style="float: right;"> 查询结果 </button>
      <button nz-button style="float: right; margin-right: 8px;" (click)="resetForm()"> 重置 </button>
    </div>

    <div nz-row nzGutter=24 style="margin-top: 16px;">
      <div nz-col nzSpan=5 nzOffset=1>
        <nz-form-item>
          <nz-form-label nzFor="keyword">
            输入搜索
          </nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="keyword" placeholder="商品名称">
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan=5>
        <nz-form-item>
          <nz-form-label nzFor="productSn">
            商品货号
          </nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="productSn" placeholder="商品货号">
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan=5>
        <nz-form-item>
          <nz-form-label nzFor="productCate">
            商品分类
          </nz-form-label>
          <nz-form-control>
            <nz-cascader [nzOptions]="cateOptions" formControlName="productCate"></nz-cascader>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan=5>
        <nz-form-item>
          <nz-form-label nzFor="brandId">
            商品品牌
          </nz-form-label>
          <nz-form-control>
            <nz-select formControlName="brandId" nzAllowClear nzPlaceHolder="请选择品牌">
              <nz-option *ngFor="let brandOption of brandOptions" [nzLabel]="brandOption.label"
                [nzValue]="brandOption.value"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row nzGutter=24>
      <div nz-col nzSpan=5 nzOffset=1>
        <nz-form-item>
          <nz-form-label nzFor="publishStatus">
            上架状态
          </nz-form-label>
          <nz-form-control>
            <nz-select formControlName="publishStatus" nzAllowClear nzPlaceHolder="全部">
              <nz-option *ngFor="let publishStatuOptio of publishStatuOptions" [nzLabel]="publishStatuOptio"
                [nzValue]="publishStatuOptio"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan=5>
        <nz-form-item>
          <nz-form-label nzFor="verifyStatus">
            审核状态
          </nz-form-label>
          <nz-form-control>
            <nz-select formControlName="verifyStatus" nzAllowClear nzPlaceHolder="全部">
              <nz-option *ngFor="let verifyStatuOption of verifyStatuOptions" [nzLabel]="verifyStatuOption"
                [nzValue]="verifyStatuOption"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>
</div>

<div class="container operate">
  <i nz-icon nzType="profile" nzTheme="outline" class="card-title"></i>
  <span class="card-title">数据列表</span>
  <button nz-button style="float: right;" nzSize="small" (click)="handleAdd()"> 添加 </button>
</div>

<div class="table-container">
  <nz-table #productTable nzSize="small" [nzData]="products" [nzFrontPagination]="false" [nzShowPagination]="false"
    nzBordered>
    <thead>
      <tr>
        <th nzAlign="center" [(nzChecked)]="thChecked" [nzIndeterminate]="thIndeterminate" (nzCheckedChange)="onAllChecked($event)"></th>
        <th nzAlign="center">编号</th>
        <th nzAlign="center">商品图片</th>
        <th nzAlign="center">商品名称</th>
        <th nzAlign="center">价格/货号</th>
        <th nzAlign="center">标签</th>
        <th nzAlign="center">排序</th>
        <th nzAlign="center">SKU库存</th>
        <th nzAlign="center">销量</th>
        <th nzAlign="center">审核状态</th>
        <th nzAlign="center">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of productTable.data">
        <td nzAlign="center" [nzChecked]="setOfCheckedId.has(data.id)"
          (nzCheckedChange)="oneItemChecked(data.id, $event)"></td>
        <td nzAlign="center">
          {{data.id}}
        </td>
        <td nzAlign="center">
          <img [src]="data.pic" style="height: 80px;">
        </td>
        <td nzAlign="center">
          <p>{{data.name}}</p>
          <p>品牌：{{data.brandName}}</p>
        </td>
        <td nzAlign="center">
          <p>价格：{{data.price}}</p>
          <p>货号：{{data.productSn}}</p>
        </td>
        <td nzAlign="center">
          <p>上架：<nz-switch [(ngModel)]="data.publishStatus" [nzControl]="true" (click)="handlePublishStatusClick(data.id)" [nzLoading]="publishStatusLoading"></nz-switch>
          </p>
          <p>新品：<nz-switch [(ngModel)]="data.newStatus" [nzControl]="true" (click)="handleNewStatusClick(data.id)" [nzLoading]="newStatusLoading"></nz-switch>
          </p>
          <p>推荐：<nz-switch [(ngModel)]="data.recommandStatus" [nzControl]="true" (click)="handleRecommandStatusClick(data.id)" [nzLoading]="recommandStatusLoading"></nz-switch>
          </p>
        </td>
        <td nzAlign="center">{{data.sort}}</td>
        <td nzAlign="center">
          <button nz-button nzType="primary" nzShape="circle" nzSize="large" (click)="handleSKUEditer(data.id)">
            <i nz-icon nzType="edit" nzTheme="outline"></i>
          </button>
        </td>
        <td nzAlign="center">{{data.sale}}</td>
        <td nzAlign="center">
          <p>{{data.verifyStatus | verifyStatu}}</p>
          <p><a nz-button nzType="link" nzBlock (click)="handleShowVerifyDetaile(data.id)">审核详情</a></p>
        </td>
        <td nzAlign="center">
          <p>
            <button nz-button nzSize="small" class="operateButton" (click)="handleShowProduct(data.id)">查看</button>
            <button nz-button nzSize="small" class="operateButton" (click)="handleUpdataProduct(data.id)">编辑</button>
          </p>
          <p>
            <button nz-button nzSize="small" class="operateButton" (click)="handleShowLogs(data.id)">日志</button>
            <button nz-button nzSize="small" nzDanger nzType="primary" class="operateButton" (click)="handleDeleteProduct(data.id)">删除</button>
          </p>
        </td>
      </tr>
    </tbody>
  </nz-table>
</div>

<div class="batch-operate-container">
  <nz-select [(ngModel)]="batchOperate" nzAllowClear nzPlaceHolder="批量操作" style="width: 215px;">
    <nz-option *ngFor="let operate of operateOptions" [nzValue]="operate.value" [nzLabel]="operate.label"></nz-option>
  </nz-select>
  <button nz-button nzType="primary" style="margin-left: 10px;" (click)="handleBatchOpterate()">确定</button>
</div>

<div class="pagination-container">
  <nz-pagination [(nzPageIndex)]="pageIndex" [(nzPageSize)]="pageSize" [nzTotal]="total" [nzPageSizeOptions]="[5, 10, 15]" nzShowQuickJumper nzShowSizeChanger
    [nzShowTotal]="totalTemplate" (nzPageIndexChange)="handlePageIndexChange($event)" (nzPageSizeChange)="handlePageSizeChange($event)"></nz-pagination>
  <ng-template #totalTemplate let-total>共{{total}}条</ng-template>
</div>
